<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-15
  Time: 下午5:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        body{
            padding: 30px;
            vertical-align: middle;
            background: #2aabd2;
        }
        label{
            color: white;
        }
        a{
            color: white;
        }
        .fu-login-parent{
            height: 500px;
        }
        .fu-login{
            border-radius: 10px;
            overflow: hidden;
            height: 500px;
            background: rgba(0,0,0,0.3);
        }
        .fu-login-content{
            padding-top: 20px;
        }
        .form-group{
            margin-bottom: 40px;
        }

        .yzm{
            height: 40px;
            margin-top: 60px;
            display: flex;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .yzm .yzmInput{
            flex: 6;
        }

        .yzm .yzmInput input{
            height: 100%;
            width: 100% ;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
        }

        .yzm .code{
            flex: 4;
        }

        .yzm .code img{
            width: 100%;
            height: 100%;
        }

        .al{
            height: 60px;
            width: auto;
            position: absolute;
            top: 20px;
            left: 46%;
            padding-left: 20px;
            padding-right: 20px;
            background: green;
            border-radius: 10px;
            color: white;
            text-align: center;
            align-content: center;
            font-size: 16px;
            line-height: 60px;
            display: none;
        }

        .futer_alert{
            display: block;
            align-content: center;
            text-align: center;
            color: red;
            font-weight: 700;
            margin-top: 20px;
        }

        .fu-loginbtn{
            width: 100%;
            margin-top: 40px;
        }

        .fu-logintitle {
            font-size: 60px;
            color: #ffffff;
            font-weight: 700;
        }

        @media only screen and (max-width: 500px){
            .fu-logintitle {
                font-size: 30px;
            }
        }

    </style>

</head>
<body id="body">

<div class="container align-middle">
    <form method="post" name="form">
        <div class="container-fluid col-md-10 col-md-offset-1 fu-login-parent">
            <p class="text-center fu-logintitle" id="fu-title">Futer</p>

            <div class="row fu-login" id="login">

                <div class="col-lg-5 col-xl-5 d-none d-lg-block" style="overflow: hidden;padding: 10px" >
                    <img src="/img/appLogo/ysn.jpeg" style="width: 100%;height: 100%;display: block;overflow: hidden">
                </div>

                <div class="col-lg-7 col-xl-7 fu-login-content col-sm-12">

                    <div class="form-group offset-md-1 col-lg-10">
                        <label for="fu-name">用户名:</label>
                        <input type="text" class="form-control"  required="required" name="name" value="libowu" id="fu-name">
                    </div>


                    <div class="form-group offset-md-1 col-lg-10">
                        <label for="fu-pwd">密&nbsp;&nbsp;&nbsp;码:</label>
                        <input type="password" class="form-control" required="required" name="password" value="123456" id="fu-pwd">
                    </div>

                    <div class="yzm offset-md-1 col-lg-10">

                        <div class="yzmInput">
                            <input type="text" required="required" name="code"  placeholder="验证码">
                        </div>

                        <div class="code">
                            <img src="/futer/kaptcha" id="code" alt="加载失败" style="margin-bottom: -3px"/>
                        </div>
                    </div>

                    <div class="row offset-md-1 col-lg-10" style="margin-top: 20px;display: flex;">
                        <a class="text-left"  href="forgetPwd" style="flex: 1;padding-left: 20px">忘记密码</a>
                        <a class="text-right" href="register"  style="flex: 1;padding-right: 20px">注册账户</a>
                    </div>

                    <button type="button" onclick="login()" id="loginbtn" class="btn btn-success fu-loginbtn offset-md-2 col-lg-8">登录</button>

                    <c:if test="${registerAlert!=null}">
                        <p class="futer_alert offset-md-1 col-lg-10" id="futer_alert">注意：邮件已发送，请到邮箱中激活账号，激活前，账号暂时无法使用</p>
                    </c:if>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="al" id="al">
    保存成功
</div>

<%--<div class="title" id="title">Futer</div>

<div class="login" id="login">
    <div class="img">
        <img src="/img/appLogo/ysn.jpeg" width="390">
    </div>

    <div class="input">
        <form method="post" name="form">
            <div class="input-group input-group-lg" style="margin-top: 20px">
                <span class="input-group-addon" id="sizing-addon1">用户名</span>
                <input type="text" class="form-control"  aria-describedby="sizing-addon1" required="required" name="name" value="libowu">
            </div>

            <div class="input-group input-group-lg">
                <span class="input-group-addon" id="sizing-addon2">密&nbsp;&nbsp;&nbsp;码</span>
                <input type="password" class="form-control"  aria-describedby="sizing-addon1" required="required" name="password" value="123456">
            </div>

            <div class="yzm">

                <div class="yzmInput">
                    <input type="text" required="required" name="code" placeholder="验证码">
                </div>

                <div class="code">
                    <img src="/futer/kaptcha" id="code" alt="加载失败" style="margin-bottom: -3px"/>
                </div>
            </div>

            <div class="forget" style="margin: 0 auto;width: 60%;">
                <a href="forgetPwd" style="float: left;margin-left: 20px">忘记密码</a>
                <a href="register" style="float: right;margin-right: 20px">注册账户</a>
            </div>

            <button class="btn btn-success" type="button" onclick="login()" id="loginbtn">登录</button>
            <c:if test="${registerAlert!=null}">
                <p class="futer_alert" id="futer_alert">注意：邮件已发送，请到邮箱中激活账号，激活前，账号暂时无法使用</p>
            </c:if>
        </form>
    </div>
</div>

<div class="al" id="al">
    保存成功
</div>--%>

<script type="text/javascript">
    (document.getElementById("body")).style.backgroundColor='${config.bgforlogin}';
    (document.getElementById("login")).style.borderRadius='${config.circular}';
    (document.getElementById("fu-title")).style.color='${config.fontcolorforlogin}';
    (document.getElementById("fu-title")).innerText='${config.logintitle}';

    if (${registerAlert!=null}){
        setTimeout(hiddenAl,2000);
        (document.getElementById("al")).style.backgroundColor="green";
        (document.getElementById("al")).innerText="${registerAlert}";
        (document.getElementById("al")).style.display="block";
    }

    if (${successChangePwd!=null}){
        setTimeout(hiddenAl,2000);
        (document.getElementById("al")).style.backgroundColor="green";
        (document.getElementById("al")).innerText="${successChangePwd}";
        (document.getElementById("al")).style.display="block";
    }

    function hiddenAl(){
        (document.getElementById("al")).style.display="none";
    }


    $(function(){
        $('#code').click(function () {//生成验证码
            $(this).hide().attr('src', 'kaptcha?' + Math.floor(Math.random()*100) ).fadeIn();
            event.cancelBubble=true;
        });
    });


    window.onbeforeunload = function(){
        //关闭窗口时自动退出
        if(event.clientX>360&&event.clientY<0||event.altKey){
            alert(parent.document.location);
        }
    };


    function changeCode() {
        $('#code').hide().attr('src', 'kaptcha?' + Math.floor(Math.random()*100) ).fadeIn();
        event.cancelBubble=true;
    }

    function login(){
        var login = document.getElementById("loginbtn");
        var username = form.name.value;
        var password = form.password.value;
        var code = form.code.value;
        if (username==null || username==''){
            login.type = "submit";
            return;
        }

        if (password==null || password == ''){
            login.type = "submit";
            return;
        }

        if (code==null || code == ''){
            login.type = "submit";
            return;
        }

        var user = {
            name:username,
            password:password,
            code:code
        }
        $.ajax({
            type: "post",
            url: "/futer/checkInfo",
            data:JSON.stringify(user) ,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response, ifo) {
                if(response.toString()=="登录成功"){
                    window.location.href="/futer/index";
                    (document.getElementById("al")).style.backgroundColor='green';
                }else{
                    (document.getElementById("al")).style.backgroundColor='red';
                    changeCode();
                    form.code.value="";
                }
                (document.getElementById("al")).innerText=response.toString();
                (document.getElementById("al")).style.zIndex='999';
                (document.getElementById("al")).style.display='block';
                setTimeout(hiddenAl,2000);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                (document.getElementById("al")).style.backgroundColor='red';
                (document.getElementById("al")).innerText="登录失败";
                (document.getElementById("al")).style.zIndex='999';
                (document.getElementById("al")).style.display='block';
                setTimeout(hiddenAl,2000);
                changeCode();
            }
        })
    }
</script>
</body>
</html>
